:scss

  /* editor styles , move to shared */
  #editor-container {
      padding: 0;
      margin: 0;
      position: relative;
      color: rgba(0,0,0,.8);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -moz-font-feature-settings: liga on;
      font-size: 8px;
      line-height: 1.4;

      font-family: Georgia,Cambria,Times New Roman,Times,serif;
      letter-spacing: .01rem;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      line-height: 1.9;

      .graf--code {
        position: relative;
        overflow: visible;
        background: rgb(0, 0, 0);
        font-family: Menlo, Monaco, Consolas, "Courier New", Courier, monospace;
        font-size: 16px;
        margin-bottom: 20px;
        padding: 20px;
        white-space: pre-wrap;
        color: rgb(255, 255, 255);
      }
      .graf--h2 {
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          //font-size: 60px;
          font-style: normal;
          font-weight: 700;
          letter-spacing: -.04em;
          line-height: 1;
          margin-bottom: 8px;
          margin-left: -3px;
          margin-top: 6px;
          padding-top: 0;
      }

      .graf--h2+.graf--h3, .graf--h2+.graf--h4 {
          margin-top: -6px;
      }

      .graf--h3, .graf--h4 {
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          letter-spacing: -.02em;
          font-style: normal;
          line-height: 1.2;
          margin-top: 40px;
      }

      .graf--h3 {
          font-weight: 700;
          font-size: 36px;
          margin-left: -1.8px;
          margin-bottom: 4px;
      }

      .graf--h3+.graf--h4, .graf--h4+.graf--h3 {
          margin-top: -2px;
      }

      .graf--h4 {
          font-weight: 300;
          font-size: 30px;
          margin-left: -1.5px;
          color: rgba(0,0,0,.44);
          margin-bottom: 2px;
      }

      .graf--p,
      .graf--p,
      .graf--p a,
      .graf--figure,
      .graf--figure > div > span,
      .graf--figure > div > a ,
      .graf--column,
      .graf--column,
      .graf--column {
          font-size: 16px;
      }

      .graf--figure {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          clear: both;
          margin-bottom: 30px;
          outline: medium none;
          position: relative;
      }

      .graf--blockquote, blockquote {
          //font-family: $dante-font-family-serif;
          border-left: 3px solid rgba(0, 0, 0, .8);
          font-style: italic;
          font-weight: 400;
          letter-spacing: 0.16px;
          letter-spacing: 0.01rem;
          margin-left: 0px;
          padding-left: 14px;
          margin-bottom: 25px;
          font-size: 1em;
          line-height: 1.9em;
          margin-top: 20px;
      }

      .aspect-ratio-fill{
        display:none;
      }

      .graf-image, .graf-imageAnchor, .iframeContainer, .iframeContainer>iframe {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: block;
          margin: auto;
          max-width: 100%;
      }

      .aspectRatioPlaceholder {
          margin: 0 auto;
          position: relative;
          width: 100%;
      }

      .imageCaption {
          top: 0;
          text-align: center;
          margin-top: 0;
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          letter-spacing: 0;
          font-weight: 400;
          font-size: 13px;
          line-height: 1.4;
          color: rgba(0,0,0,.6);
          outline: 0;
          z-index: 300;
          margin-top: 10px;
          position: relative;
      }


      @media (max-width: 1200px){

        .imageCaption, .postField--outsetCenterImage>.imageCaption {
            position: relative;
            width: 100%;
            text-align: center;
            left: 0;
            margin-top: 10px;
        }

      }

      @media screen and (min-width: 768px){
          .jumbotron {
              padding-top: 48px;
              padding-bottom: 48px;
          }        
      }

      .jumbotron {
          padding-top: 30px;
          padding-bottom: 30px;
          margin-bottom: 30px;
          color: inherit;
          background-color: #eee;
          padding-right: 60px;
          padding-left: 60px;
      }


      @media (min-width: 768px){
          .col-sm-6 {
              width: 50%;
          }
      }

      @media (min-width: 768px){
          .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
              float: left;
          }
      }

      .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, 
      .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
      .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, 
      .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, 
      .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, 
      .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, 
      .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
      .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12,
      .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
      .col-xs-7, .col-xs-8, .col-xs-9 {
          position: relative;
          min-height: 1px;
          padding-right: 15px;
          padding-left: 15px;
      }

      .dante-clearfix:before {
          display: table;
          content: " ";
      }

      .signature { 

          position: relative;
          display: table;
          float: left;
          margin-bottom: 20px;
      
          img {
              float: left;
              margin-right: 30px;
              margin-bottom: 0 !important;
              height: 100px;
              width: 100px;
              border-radius: 50px;
              height: 100px;
              width: 100px;
              border-radius: 50px;
          }

          .signature {
              display: table;
              float: left;
          }

          .text {
            width: 100%;
            display: table-cell;
            vertical-align: middle;
        }

      }

      .graf--mixtapeEmbed, .markup--mixtapeEmbed-strong {
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          font-style: normal;
          font-weight: 300;
          letter-spacing: -.02em;
      }

      .graf--mixtapeEmbed {
          color: rgba(0,0,0,.6);
          font-size: 12px;
      }

      .graf--mixtapeEmbed {
          border: 1px solid rgba(0,0,0,.15);
          border-radius: 5px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin-bottom: 40px;
          margin-top: 40px;
          max-height: 310px;
          max-width: 700px;
          overflow: hidden;
          padding: 30px;
          position: relative;
      }

      .graf--mixtapeEmbed a {
        text-decoration: none;
      }

      .mixtapeImage {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        float: right;
        height: 310px;
        margin: -30px -30px 0 25px;
        width: 310px;
      }

      .graf--mixtapeEmbed a {
        text-decoration: none;
      }

      .markup--mixtapeEmbed-strong {
          color: #000;
          display: block;
          font-size: 30px;
          line-height: 1.2;
          margin-bottom: 0;
      }

      .markup--mixtapeEmbed-em {
          display: block;
          font-size: 16px;
          font-style: normal;
          margin-bottom: 10px;
          max-height: 120px;
          overflow: hidden;
      }
  }

:scss

  #main_wrapper{
    color:transparent;
    opacity:0;
    font-size:0px;
    border:0;
    max-height:1px;
    width:1px;
    margin:0px;
    padding:0px;
    border-width:0px!important;
    display:none!important;
    line-height:0px!important;
  }
  td{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight:normal;
  }

  .mail_body {
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:12px;
    font-weight:normal;
    line-height:18px;
  }

  .meta {
    font-size:12px;line-height:18px;padding:3px 15px 0 5px;

    td{
      font-size:13px;font-weight:normal;padding:0;
    }

    td:nth-child(1){
      font-size:13px;
      font-weight:normal;
      padding:0 5px 0 0;
      text-align:center;
      width:13px
    }

    td:nth-child(2){
      font-size:11px;font-weight:normal;padding:0 5px 0 0;
    }
  }

  #header{
    background-color:#ffffff;
    border-bottom-color:#d6d6d6;
    border-bottom-style:solid;
    border-bottom-width:1px;
    color:#3e474c;
    font-size:12px;
    height:auto;
    line-height:18px;
    margin:0 auto;
    max-height:40px;
    max-width:600px;
    min-height:40px;
    width:100%;

    #rightSide{
      padding:10px 20px;
      text-align:right;
      vertical-align:middle;
      img{
        margin:0;
        padding-right:7px;
        vertical-align:middle;
      }
      a{
        color:#3e474c;
        font-weight:normal;
        text-decoration:underline
      }
    }

    #replyAbove{
      padding:10px 20px;vertical-align:middle;

      table {
        font-size:12px;line-height:18px;

        td {
          padding:0 0 0 10px;
        }
        #user-replyAbove{
          padding:0;
        }
      }
    }

  }

  #notification-settings{
    color:#ffffff;
    padding:0 20px 0 0;
    text-align:right;
  }

  #source{
    padding:0 0 0 10px;
  }

  #logo{
    height:20px;
    padding:0 0 0 20px;
  }

  #footer{
    color:#ffffff;
    font-weight:bold;
    background-color:#2f2f2f;
    font-size:12px;
    height:40px;
    line-height:18px;
    margin:0 auto;
    max-width:600px;
    width:100%;
    a{
      color:#ffffff;
      font-weight:bold;
    }
  }

  #conversation{
    background-color:#f9f9f9;
    font-size:12px;
    height:auto;
    line-height:18px;
    margin:0 auto;
    max-width:600px;
    overflow:hidden;
    width:100%;

    td{
      font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
      //font-size:1px;
      font-weight:normal;
      height:40px;
      line-height:1;
      max-height:40px;
      padding:0;
    }

    #message{
      table{
        border-collapse:separate;
        border-spacing:0;
        font-size:12px;
        line-height:18px;
        margin:0 auto;
        max-width:560px;
        width:90%
      }

      td{
        font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
      }

      .messageBody{
        background-color:#ffffff;
        border:1px solid #D5DCD2;
        border-radius:8px;
        padding:0;
        word-wrap:break-word;
      }

      .part-content{
        font-size:12px;
        line-height:18px;
        table-layout:fixed;
        width:100%;
        td{
          color:#3e474c;
          font-size:14px;
          font-weight:normal;
          padding:10px 13px;
        }
      }

      .avatarWrapper{
        border-radius:2px;
        color:white;
        font-weight:bold;
        height:32px;
        padding:1px 0 0;
        text-align:center;
        vertical-align:middle;width:32px;
        img{
          border-radius:2px;
        }
      }

      .meta{
        color:#b6c5ce;
        font-size:13px;
        font-weight:normal;
        padding:5px 5px 0;
        a{
          text-decoration:none;
        }
      }
    }
  }

%div
  #main_wrapper
    %img{:border => "0", :height => "1", :src => "", :width => "1"}
  .mail_body{:style => ""}
  %span
    %div
      %div
    %table#header{:align => "center", :bgcolor => "", :border => "0", :cellpadding => "0", :cellspacing => "0", :valign => "top"}
      %tbody
        %tr
          %td#replyAbove{:style => "", :valign => "middle"}
            %div
              %table{:style => ""}
                %tbody
                  %tr
                    %td#user-replyAbove{:style => ""}
                      Write ABOVE to reply to
                      %a{:target => "_blank", href: "#{ENV['HOST']}/apps/#{@app_key}/users/#{@user_id}"}
                        = @author_name
          %td#rightSide{:align => "right", :style => "", :valign => "middle"}
            -# %img{:height => "16", :src => "", :style => "", :width => "16"}/
            %a{:href => "#{ENV['HOST']}/apps/#{@app_key}/conversations/#{@conversation_key}", :style => "", :target => "_blank"} 
              View conversation
  
  
  %table#conversation{:align => "center", :border => "0", :cellpadding => "0", :cellspacing => "0", :style => "", :valign => "top"}
    %tbody
      %tr
        %td{:style => ""}  
      %tr
        %td{:style => "padding:0"}
          #message

          
            %table{:align => "center", :border => "0", :cellpadding => "0", :cellspacing => "0", :style => "border-collapse:separate;border-spacing:0;font-size:12px;line-height:18px;margin:0 auto;max-width:560px;width:90%", :valign => "top"}
              %tbody
                %tr
                  %td{:style => "padding:0;vertical-align:top;width:32px", :valign => "top"}
                    %table{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "font-size:12px;line-height:18px;width:32px"}
                      %tbody
                        %tr
                          %td.avatarWrapper{:align => "center", :style => "", :valign => "middle"}
                            %img{:alt => @conversation_part.authorable.name, :height => "32", :src => @conversation_part.authorable.avatar_url, :style => "", :width => "32"}/
                  %td{:style => "font-size:1px;font-weight:normal;padding:0;vertical-align:top;width:10px", :valign => "top"}
                  %td.messageBody{:bgcolor => "#FFFFFF", :style => ""}
                    %table.part-content{:border => "0", :cellpadding => "0", :cellspacing => "0"}
                      %tbody
                        %tr
                          %td
                            #editor-container
                              = @content.html_safe
                %tr
                  %td{:style => "padding:0"}
                  %td{:style => "padding:0"}
                  %td.meta{:style => ""}
                    %input{:type => "hidden"}/
                    %a{ :target => "_blank"}= @author_name
                    on
                    %a{:target => "_blank"}= l @conversation_part.created_at, format: :short
                %tr
                  %td{:style => "padding:0"}
                  %td{:style => "padding:0"}
                  %td{:style => "padding:0"}
                    %table.meta{:style => ""}
                      %tbody
                        %tr
                          %td{:align => "center", :style => ""}
                            -# %img{:height => "13", :src => ".png", :width => "13"}/
                          %td{:style => ""} EMAIL
                          %td{:style => ""}
                          %td{:style => ""}
                            %a{:href => "mailto:#{@author_email}", :style => "color:default;text-decoration:underline", :target => "_blank"} 
                              = @author_email
                          %td{:style => ""}
                    
                    -#
                      %table.meta.inline{:style => "float:left;"}
                        %tbody
                          %tr
                            %td{:align => "center", :style => ""}
                              %img{:height => "13", :src => ".png", :width => "13"}/
                            %td{:style => ""} SIGNED UP
                            %td{:style => ""}
                            %td{:style => ""} over 13 years ago
                            %td{:style => ""}

                    -#
                      %table.meta.inline{:style => "float:left;"}
                        %tbody
                          %tr
                            %td{:align => "center", :style => ""}
                              %img{:height => "13", :src => "", :width => "13"}/
                            %td{:style => ""} Santiago, Chile
                %tr
                  %td{:colspan => "3", :style => "font-size:1px;font-weight:normal;height:40px;line-height:1;max-height:40px;padding:0"}  

  
  %table#footer{:align => "center", :border => "0", :cellpadding => "0", :cellspacing => "0", :style => "", :valign => "top"}
    %tbody
      %tr
        %td#logo{:style => ""}
          - if @app_logo.present?
            %a{:href => "", :style => "", :target => "_blank"}
              %img{:height => "25", :src => @app_logo, :style => "border:none", :width => "25"}/
          
        %td#source{:style => ""}
          This email was sent from
          %a{ :href => "https://chaskiq.io", :style => "", :target => "_blank"} 
            Chaskiq
        %td#notification-settings{:align => "right", :style => ""}
          Go to your app settings
          %a{ href: "#{ENV['HOST']}/apps/#{@app_key}/settings", :style => "", :target => "_blank"} 
            here
